<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_没有模块化</title>
  <!-- 
  在 JavaScript 的早期版本中，没有模块化的概念，这使得代码的组织和管理变得比较困难。随着项目的规模扩大，代码的可维护性和可读性成为了主要问题。为了应对这些挑战，开发者们采取了一些策略来解决没有模块化的问题。
  一、使用命名空间
   1. 定义
  命名空间是一种将相关代码组织在一起的方式，通常通过对象来实现。通过将变量和函数放入一个对象中，可以避免全局命名冲突。

   2. 示例
  var MyApp = MyApp || {}; // 创建命名空间
  MyApp.utils = {
      add: function(a, b) {
          return a + b;
      },
      subtract: function(a, b) {
          return a - b;
      }
  };

  // 使用命名空间
  console.log(MyApp.utils.add(2, 3)); // 输出: 5
  二、立即调用函数表达式（IIFE）
   1. 定义
  立即调用函数表达式（IIFE）是一种在定义后立即执行的函数。它可以创建一个局部作用域，从而避免全局命名污染。

   2. 示例
  (function() {
      var privateVar = '这是一个私有变量';

      function privateFunction() {
          console.log(privateVar);
      }

      // 公开接口
      window.MyModule = {
          show: privateFunction
      };
  })();

  // 使用模块
  MyModule.show(); // 输出: 这是一个私有变量
  三、使用构造函数
   1. 定义
  构造函数可以用于创建对象的蓝图，通过  `new`  关键字实例化对象。这样可以将相关的属性和方法封装在一起。
   2. 示例
  function Person(name, age) {
      this.name = name;
      this.age = age;
  }

  Person.prototype.greet = function() {
      console.log(`你好，我叫 ${this.name}，今年 ${this.age} 岁。`);
  };

  var person1 = new Person('小明', 25);
  person1.greet(); // 输出: 你好，我叫 小明，今年 25 岁。
  四、使用模块加载器
   1. 定义
  在没有原生模块化支持的环境中，可以使用模块加载器，如 RequireJS 或 CommonJS。它们提供了一种方法来管理依赖关系并加载模块。

   2. 示例（使用 CommonJS）
  // 在 module.js 文件中
  exports.add = function(a, b) {
      return a + b;
  };

  // 在 main.js 文件中
  const math = require('./module');
  console.log(math.add(2, 3)); // 输出: 5
  五、总结
  - 命名空间：通过对象将相关代码组织在一起，避免全局命名冲突。
  - 立即调用函数表达式（IIFE）：创建局部作用域，避免全局变量污染。
  - 构造函数：用于封装相关属性和方法，创建对象的蓝图。
  - 模块加载器：使用第三方库来管理模块和依赖关系。
  这些方法在没有模块化支持的早期 JavaScript 开发中非常有效，帮助开发者更好地组织和管理代码。随着 ES6 及以后的版本引入了原生模块化机制（如  `import`  和  `export` ），这些解决方案的使用逐渐减少，但它们仍然是理解 JavaScript 发展过程中的重要组成部分。
  -->
</head>
<body>

  <script src="./01_moduleA.js"></script>
  <script src="./02_moduleB.js"></script>
  <script src="./03_utils.js"></script>
  
</body>
</html>